<template>
  <div class="newlist">
    <h2 style="margin-bottom: 20px">我关注的资讯</h2>
    <div class="contaier" style="display: flex; flex-direction: column">
      <el-empty v-if="newsList.length == 0" description="暂无数据" />
      <div v-for="(item, index) in newsList" :key="index" class="newitem">
        <div class="img">
          <img
            :src="`https://universityed4e759ca2ed893test.chatgk.com${item.image_url}`"
            alt=""
            style="border-radius: 8px; width: 100%; height: 100%"
          />
        </div>
        <div class="info">
          <div class="title font-weight-bold" @click="handleNewDet(item)">
            {{ item.title }}
          </div>
          <div style="display: flex; color: #aaa" class="f12">
            <div class="page-view df" style="display: none">
              <el-icon style="margin-right: 15px"><View /></el-icon>
              <div style="color: red">{{ item.view_total }}</div>
            </div>
            <div class="time df">
              <el-icon style="margin: 0 15px"><Clock /></el-icon>
              <div>
                {{ item.update_time }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { likeList } from '@/api/user';
import { useRouter } from 'vue-router';
const router = useRouter();
const newsList = ref([]);
const like = ref({
  type: '',
  detail: '1',
});
onMounted(() => {
  likeList(like.value).then((res) => {
    if (res.data.code == 20000) {
      newsList.value = res.data.data.newsDetail;
    } else {
      console.log(res);
    }
  });
});
const handleNewDet = (item) => {
  router.push({
    path: '/news/detail',
    query: {
      id: item.id,
    },
  });
};
</script>

<style scoped>
.newlist {
  width: 100%;
  .newitem {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
  }
  .img {
    width: 180px;
    height: 120px;
    border-radius: 8px;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 20px;
    .title {
      cursor: pointer;
      &:hover {
        color: var(--active-text);
      }
    }
  }
}
</style>
